<template>
  <div>
    <div class="recommend-title">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
      <span class="title-desc">猜你喜欢</span>
    </div>
    <ul class="recommend-list">
      <li class="recommend-item border-bottom" v-for="item of recommendList" :key="item.id">
        <a href="" class="item">
          <div class="img-wrap">
            <img :src="item.imgUrl" alt="">
            <div class="img-tag">{{item.tagText}}</div>
          </div>
          <div class="info-wrap">
            <div class="info-title">{{item.infoTitle}}</div>
            <div class="info-comment"><span class="info-rate">{{item.infoRate}}</span><span class="comment-count">21498条评论</span></div>
            <div class="info-price"><span class="price-tag">￥<em class="price">{{item.price}}</em>起</span><span class="address">{{item.address}}</span></div>
          </div>
        </a>
      </li>
    </ul>
    <a href="javascript: void(0);" class="recommend-more">查看所有产品</a>
  </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      recommendList: [
        {
          id: '00001',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1808/2f/2fc9a5055a1b287ca3.water.jpg_200x200_4ea76958.jpg',
          tagText: '随买随用',
          infoTitle: '海昌发现王国',
          infoRate: '❤❤❤❤❤',
          price: '250',
          address: '金石滩旅游景点'
        },
        {
          id: '00002',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1708/c3/c386e00b07185a18a3.water.jpg_200x200_f7cafb8b.jpg',
          tagText: '随买随用',
          infoTitle: '大连森林动物园',
          infoRate: '❤❤❤❤❤',
          price: '250',
          address: '西岗区'
        },
        {
          id: '00003',
          imgUrl: 'http://img1.qunarzz.com/wugc/p110/201204/20/a5dc43dd3cc1ae6493835fbb.jpg_200x200_8fb34099.jpg',
          tagText: '随买随用',
          infoTitle: '大连圣亚海洋世界',
          infoRate: '❤❤❤❤❤',
          price: '250',
          address: '沙河口区'
        },
        {
          id: '00004',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1409/02/f27c6e58008d1ac501e898f38c1cc780.jpg_200x200_45d633bc.jpg',
          tagText: '随买随用',
          infoTitle: '老虎滩海洋公园',
          infoRate: '❤❤❤❤❤',
          price: '250',
          address: '中山区'
        },
        {
          id: '00005',
          imgUrl: 'http://img1.qunarzz.com/sight/p0/1707/57/5729585581b6732fa3.water.jpg_200x200_85298361.jpg',
          tagText: '随买随用',
          infoTitle: '大连冬泉温泉',
          infoRate: '❤❤❤❤❤',
          price: '250',
          address: '金州区'
        }
      ]
    }
  }
}
</script>
<style lang="stylus" scoped>
  .recommend-title
    padding: .24rem .26rem
    img
      width: .3rem
      height: .3rem
      vertical-align: middle
    .title-desc
      display: inline-block
      vertical-align: middle
  .recommend-item
    padding: .2rem 0 .2rem .26rem
  .item
    display: flex
    .img-wrap
      width: 2rem
      height: 2rem
      background: #f0f0f0
      position: relative
      img
        width: 100%
        height: 100%
      .img-tag
        background: url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png) no-repeat center
        background-size: 100%
        position: absolute
        top: .2rem
        left: 0
        width: 1.02rem
        height: .38rem
        color: #fff
        font-size: .2rem
        line-height: .38rem
        text-indent: .04rem
    .info-wrap
      flex: 1
      padding-left: .22rem
      .info-title
        margin-top: .26rem
        height: .44rem
        font-size: .32rem
        line-height: .44rem
        color: #212121
      .info-comment
        margin-top: .14rem
        height: .34rem
        .info-rate
          color: #ff8300
        .comment-count
          color: #616161
          font-size: .24rem
          line-height: .34rem
          margin-left: .2rem
      .info-price
        margin-top: .22rem
        color: #616161
        font-size: .24rem
        line-height: .4rem
        position: relative
        .price-tag
          color: #ff8300
          .price
            font-size: .4rem
        .address
          position: absolute
          bottom: 0
          right: .24rem
  .recommend-more
    display: block
    padding: .2rem 0
    text-align: center
    font-size: .28rem
    line-height: .4rem
</style>
